/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'theme';
@import'color';
@import'model-beta';
@import'common';
html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
    margin: 0;
}
* {
    font-family: 'icomoon', "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}
a {
    text-decoration: none;
}
._top {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 96%;
    padding: 0 2%;
    background-color: $themeColor;
    box-shadow: 0 1px 8px 1px #777;
    * {
        color: $fontColor;
    }
    a {
        display: inline-block;
        vertical-align: top;
        padding: 0.6rem;
    }
    [class^="icon-"]:before, [class*=" icon-"]:before {
        font-size: 18px;
    }
    ._top_left {
        display: inline-block;
        vertical-align: top;
        width: 40%;
    }
    ._top_right {
        width: 60%;
        display: inline-block;
        vertical-align: top;
        text-align: right;
    }
    ._topmenu {
        width: 100%;
        a {
            padding: 0;
            display: inline;
        }
        .menuitem {
            text-align: center;
            border-top: 0px solid #fff;
            height: 0;
            line-height: 1.8rem;
            overflow: hidden;
            @include comic_1(0.25, 0);
        }
        &.focus {
            .menuitem {
                border-top: 1px solid #fff;
                height: 1.8rem;
            }
        }
    }
}
._topblock {
    height: 34px;
}
._topinfo {
    z-index: 0;
    position: relative;
    width: 100%;
    text-align: center;
    .storeinfo {
        position: absolute;
        line-height: 3rem;
        bottom: 0;
        width: 96%;
        padding: 0 2%;
        height: 3rem;
        z-index: 2;
        .logo {
            width: 20%;
            padding: 2%;
            position: absolute;
            line-height: 0;
            bottom: 0;
            background-color: rgba($white, 0.5);
            left: 0;
            img {
                width: 100%;
            }
        }
        .storename {
            position: absolute;
            line-height: 3rem;
            bottom: 0;
            right: 0;
            background-color: rgba($white, 0.5);
            width: 76.4%;
            font-size: 1.3rem;
            @include Line(1);
        }
    }
    .picwall {
        position: relative;
        z-index: 1;
        @include comic_1(0, 0);
        width: 100%;
        overflow: hidden;
        .clearfix {
            *zoom: 1;
        }
        .clearfix:after {
            clear: both;
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
        }
        .carosule {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .pic-show {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .pic {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: absolute;
        }
        .pic img {
            width: 100%;
            display: block;
            border: 0 none;
        }
    }
}
.navbox {
    width: 98%;
    padding: 1rem 1%;
    button {
        width: 48%;
        margin: 1%;
        padding: 0.5rem;
        text-align: center;
    }
}
button {
    border: 0;
    padding: 0.3rem 0.5rem;
    background-color: $themeColor;
    color: $fontColor;
    box-shadow: 0 1px 5px #aaa;
    border-radius: 2px;
}
.mainbox {
    margin-top: 0.5rem;
    .eachtag {
        width: 98%;
        padding: 0.5rem 1%;
        background-color: rgba($white, 0.5);
        text-align: left;
        margin-bottom: 1.5rem;
        .tagtitle {
            width: 100%;
            padding-bottom: 0.2rem;
            text-align: left;
            border-bottom: 1px solid $themeColor;
            font-size: 16px;
            margin-bottom: 0.5rem;
        }
    }
    .goodsitem {
        display: inline-block;
        vertical-align: top;
        width: 48%;
        // box-shadow: 0 1px 5px #f0f0f0;
        // background-color: $white;
        margin: 2% 1%;
        overflow: hidden;
        img {
            width: 100%;
        }
        .goodsinfo {
            width: 96%;
            padding: 0.2rem 2%;
            line-height: 1.5rem;
            .item {
                color: $black;
                @include Line(1);
                .price {
                    color: $red;
                }
            }
        }
    }
}
.choselist {
    margin-top: 0.5rem;
    width: 100%;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid $themeColor;
    text-align: center;
    margin-bottom: 1rem;
    a {
        display: inline-block;
        margin: 0 1.5rem;
        color: $black;
        &.focus {
            color: $blue;
        }
    }
}
.tagbox {
    width: 98%;
    padding: 0.5rem 1%;
    .tag {
        display: inline-block;
        padding: 0.3rem 0.5rem;
        background-color: $themeColor;
        color: $fontColor;
        box-shadow: 0 1px 5px #aaa;
        margin: 1%;
        border-radius: 2px;
    }
}
.price {
    color: $red;
}
.ginfo {
    display: inline-block;
    width: 100%;
    hr {
        background-color: $themeColor;
        height: 1px;
        border: 0;
    }
    .gtitle {
        width: 96%;
        padding: 0 2%;
        font-size: 16px;
        @include Line(1);
        margin-bottom: 0.5rem;
    }
    .goodsimgs {
        width: 100%;
        overflow: hidden;
        .movebox {
            width: 100%;
            overflow: hidden;
            background-color: $white;
            .bigimgbox {
                width: 100%;
                @include breakLine();
                .bigimg {
                    display: inline-block;
                    width: 100%;
                    vertical-align: middle;
                }
            }
        }
        .smallimgbox {
            margin-top: 1.5rem;
            .smallimg {
                margin: 0 0.25rem;
            }
        }
    }
    .item {
        padding: 0.5rem 0.2rem;
        .i {
            display: inline-block;
            vertical-align: top;
            width: 50%;
        }
    }
}
.bottomblock {
    height: 3.5rem;
}
.tobuy {
    position: fixed;
    width: 96%;
    padding: 0.5rem 2%;
    text-align: center;
    bottom: 0;
    left: 0;
    background-color: $white;
    .num {
        width: 3rem;
        padding: 0.2rem 0.2rem;
        line-height: 1rem;
        margin-right: 0.8rem;
    }
}
.cart {
    .title {
        padding: 0.8rem 2%;
        font-size: 1.5rem;
    }
    .cartdetail {
        width: 98%;
        padding: 0.5rem 1%;
        background-color: rgba($white, 0.3);
        .nothing {
            padding: 3rem 0;
            text-align: center;
            .icon-cart2:before {
                font-size: 7rem;
                color: $grayLight;
            }
        }
        .cartitem{
        	width: 100%;
        	height: 65px;
        	padding: 0.6rem 0;
        	overflow: hidden;
        	position: relative;
        	@include comic_1(0.25,0);
        	.gimg,.gcontent,.icon-remove2{
        		-webkit-filter: blur(0);
        	}
        	&.focus{
        		.gimg,.gcontent,.icon-remove2{
        			-webkit-filter: blur(5px)
        		}
        	}
        	.hidden{
        		z-index: 100;
    			width: 100%;
    			background-color: rgba($white,0.3);
    			position: absolute;
    			top: -120%;
    			left: 0;
    			height: 0;
    			text-align: center;
    			@include comic_1(0.25,0);
    			button{
    				margin: 0 1rem;
    			}
    			&.focus{
    				top: 0;
    				height: 100%;
    			}
    		}
        	.gimg{
        		display: inline-block;
        		height: 65px;
        		width: 20%;
        		margin-right: 1%;
        		vertical-align: top;
        		img{
        			height: 100%;
        		}
        	}
        	.gcontent{
        		display: inline-block;
        		height: 65px;
        		width: 65%;
        		padding: 0 1%;
        		vertical-align: top;
        		overflow: hidden;

        		.name{
        			height: 40px;
        			line-height: 20px;
        			@include Line(2);
        		}
        		.count{
        			height: 21px;
        			padding: 2px 0;
        			.num{
        				width: 50%;
        				height: 21px;
        				line-height: 21px;
        				margin-right: 5%;
        				display: inline-block;
        				vertical-align: bottom;
        				input{
        					width: 30px;
        					line-height: 1em;
        				}
        			}
        			.price{
        				height: 21px;
        				width: 45%;
        				display: inline-block;
        				vertical-align: bottom;
        				line-height: 21px;
        			}
        		}
        	}
        	.icon-remove2{
        		display: inline-block;
        		vertical-align: top;
        		height: 65px;
        		width: 8%;
        		padding: 0 2%;
        		background-color: $white;
        		line-height: 65px;
        		text-align: center;
        	}
        }
    }
    .cartcount {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 98%;
        padding: 0.6rem 1%;
        background-color: $white;
        box-shadow: 0 1px 5px 1px #aaa;
        text-align: center;
        button{
        	margin-left: 1rem;
        }
    }
}
.buyblock {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    @include comic_1(0.15, 0);
    text-align: center;
    background-color: rgba($black, 0.7);
    color: $white;
    overflow: hidden;
    &.focus {
        height: 100%;
    }
    .text {
        width: 75%;
        margin: 45% auto;
    }
    a {
        margin: 0 1.5rem;
        color: $white;
    }
}
.getmore {
    margin: 1.5rem 0;
    padding: 0 1%;
}
._storeinfo {
    width: 96%;
    padding: 2rem 2%;
    background-color: rgba($white, 0.7);
    margin: 1.5rem 0;
    .logo {
        width: 100px;
        box-shadow: 0 1px 8px 1px #aaa;
        margin: 0 auto;
        margin-bottom: 1.5rem;
        img {
            width: 100%;
        }
    }
    .item {
        padding: 0.3rem 3%;
        font-size: 13px;
        line-height: 1.5rem;
        width: 94%;
        border-bottom: 1px solid #ddd;
        &:last-child {
            border-bottom: 0;
        }
        .il {
            display: inline-block;
            vertical-align: top;
            text-align: right;
            width: 25%;
        }
        .ir {
            display: inline-block;
            vertical-align: top;
            @include newLine;
            width: 75%;
        }
    }
}
.help {
    width: 96%;
    padding: 0 2%;
    margin-bottom: 2rem;
    .title {
        font-size: 18px;
        color: $orange;
        padding: 0.3rem 0;
        border-bottom: 1px solid #ddd;
    }
    table {
        margin: 0 auto;
        margin-top: 1rem;
        border-collapse: collapse;
        width: 90%;
        max-width: 480px;
        text-align: center;
        overflow: hidden;
        border-radius: 2px;
        background-color: $white;
        box-shadow: 0 1px 8px 1px #aaa;
        thead {
            background-color: #aaa;
            td {
                padding: 0.8rem 0.5rem;
            }
        }
        td {}
    }
}
.sign {
    width: 100%;
    text-align: center;
    overflow: hidden;
    @include comic_1(0.35, 0);
    .title {
        font-size: 6.5rem;
        color: rgba($grayLight, 0.5);
    }
    .stitle {
        padding: 0.5rem 0;
        margin: 0.5rem 0;
    }
    .item {
        padding: 0.3rem 0;
        .signinput {
            width: 18rem;
            border-radius: 2px;
            border: 1px solid $themeColor;
            padding: 0.3rem 0.2rem;
            line-height: 1rem;
        }
        .signbutton {
            width: 18.4rem;
            padding: 0.3rem 0;
            text-align: center;
        }
        a {
            color: $cyan;
            padding: 0 1.5rem;
            &.first {
                border-right: 1px solid $grayLight;
            }
        }
        .il {
            width: 40%;
            text-align: right;
        }
    }
    &.focus {
        margin: 3rem 0;
        height: 55rem;
    }
    &.none {
        margin: 0;
        height: 0;
    }
}

.pay{
	width: 98%;
	padding: .5rem 1%;
	@include breakLine;
	overflow: hidden;
	@include comic_1(.5,0);
	-webkit-filter: blur(0);
	&.focus{
		-webkit-filter: blur(2px);
	}
	.orderdetail{
		@include comic_1(0.25,0);
		display: inline-block;
		vertical-align: top;
		width: 100%;
		margin-right: 10%;
		&.focus{
			margin-left: -110%;
		}
		.address{
			margin-bottom: 1rem;
			.item{
				margin: 0.5rem 0;
				.daddr{
					border: 0;
					border-bottom: 1px solid #aaa;
					background-color: transparent;
					line-height: 1.5em;
					padding: 0.2rem 1%;
					width: 98%;
					border-radius: 2px;
					color: rgb(84,84,84);
					@include newLine;
				}
			}
		}
		.paym{
			width: 100%;
			margin-top: 1rem;
			.title{
				font-size: 1.5rem;
				color: $themeColor;
				margin-bottom: .5rem;
			}
			.paymethod{
				width: 96%;
				margin: .3rem 0;
				padding: 0.5rem 2%;
				background-color: rgba($white,.7);
				@include comic_1(.25,0);
				&.focus{
					background-color: rgba($btnHover,.7);
					color: $fontColor;
					.ptitle{
						color: $black;
					}
				}
				.ptitle{
					font-size: 1.2rem;
					color: $orange;
					text-shadow: 1px 0 4px #fff;
				}
				input{
					display: none;
				}
			}
		}
	}
	input{
		line-height: 1em;
		border-radius: 2px;
		border: 0;
		border-bottom: 1px solid #aaa;
		padding: 0.3rem 1%;
		width: 98%;
		background-color: transparent;
		outline: none;
	}
	.addressbox{
		display: inline-block;
		vertical-align: top;
		width: 100%;
		padding-bottom: 5rem;
		.item{
			width: 96%;
			padding: 0.5rem 2%;
			background-color: rgba($white,.7);
			margin: 0.7rem 0;
			border-radius: 2px;
			color: $silver;
			@include comic_1(0.25,0);
			@include newLine;
			&.focus{
				background-color: rgba($green,0.7);
				color: $white;
			}
			.name{
				font-size: 1.5rem;
				color: $orange;
				display: inline-block;
				width: 50%;
				margin-right: 5%;
			}
			.phone{
				display: inline-block;
				width: 45%;
				text-align: right;
			}
		}
		.add{
			width: 0;
			margin-top: 0;
			overflow: hidden;
			padding: 0;
			background-color: rgba($white,.7);
			@include comic_1(0.25,0);
			&.focus{
				width: 98%;
				margin-top: 1rem;
				padding: 0.5rem 1%;
				.aitem{
					height: 1.5rem;
				}
			}
			select{
				margin-right: 0.3rem;
				border-radius: 2px;
			}
			.aitem{
				margin: 0.5rem 0;
				height: 0;
				@include comic_1(0.25,0);
			}
		}
	}
}
.topay{
	width: 96%;
	padding: .8rem 2%;
	background-color: $white;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	box-shadow: 1px 2px 8px 0 #777;
	.item{
		margin: .3rem 0;
		button{
			margin: 0 .2rem;
		}
	}
	.cover{
		position: fixed;
		top: 0;
		left: 50%;
		width: 0;
		height: 0;
		@include comic_1(.25,0);
		&.focus{
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba($black,.3);
		}
	}
	.alipayform{
		width: 0;
		height: 0;
		overflow: hidden;
		position: fixed;
		color: $white;
		font-size: 1.1rem; 
		@include comic_1(.25,0);
		form{
			display: inline-block;
		}
		input[type="submit"]{
			border: 0;
		    padding: 0.3rem 0.5rem;
		    background-color: $themeColor;
		    color: $fontColor;
		    box-shadow: 0 1px 5px #aaa;
		    border-radius: 2px;
		    margin: 0 .2rem;
		}
		&.focus{
			width: 100%;
			text-align: center;
			height: 6rem;
			top: 35%;
		}
	}
}
